<template>
  <span>
    <small class="dis-ib align-cm" @click="openDrawer">
      <div>秘书咨询</div>
      <u class="text-blue">{{ count }}</u>
    </small>
    <el-drawer
      title="秘书咨询"
      :visible.sync="drawer"
      direction="rtl"
      :append-to-body="true"
      :before-close="handleClose"
      :size=600
      >
      <div class="messageArea">
        <el-empty v-if="selfMsgList.length == 0" description="暂无记录"></el-empty>
        <ul class="msgList" ref="msgHeight" v-if="selfMsgList.length > 0">
          <li class="item" v-for="(v,k) in selfMsgList" :key="k">
            <div v-if="isDev">{{v.id}}</div>
            <div class="timeShow" v-if="funTimeShow(k,'addTime')">
              <span class="time">{{ $moment(v.addTime).format('Y-M-D a h:mm') }}</span>
            </div><!-- 聊天时间，通过funTimeShow判断是否显示 -->
            <div :class="['msgBox',!v.isFromUser?'isMe':'isCus']">
              <el-image class="face" :src="v.imgUrl" fit="cover"></el-image>
              <div class="msgBody">
                <div v-show="!v.isFromUser" class="nicheng">
                  {{ v.nicheng }}
                </div>
                <WxText v-if="v.type==0" :isMe="!v.isFromUser" :obj="v.msgBody"></WxText>
                <WxImage v-if="v.type==1" :isMe="!v.isFromUser" :obj="v.msgBody"></WxImage>
              </div>
            </div>
          </li>
        </ul>
      </div>
      
      <div class="dis-flex flex-cm mt20">
        <!-- <el-pagination
          @current-change="getData"
          :pager-count="pagerCount"
          :current-page.sync="pageIndex"
          :page-size="pageSize"
          layout="total, prev, next"
          :total="loginCount">
        </el-pagination> -->
      </div>
      <div v-if="isDev">
        ,{{ uidKey }} : {{ uidValue }} ;
      </div>
    </el-drawer>
  </span>
</template>

<script>
export default {
  name:'SecretaryInfo',
  components: {
    WxText: () => { return import('../Views/AppCSchat/components/wx_text.vue') },
    WxImage: () => { return import('../Views/AppCSchat/components/wx_image.vue') },
  },
  props:{
    count:{
      type:Number,
      default:function(){return 0;}
    },
    uidKey:{
      type:String,
      default:function(){return 'userId';}
    },
    uidValue:{
      type:Number,
      default:function(){return 0;}
    },
  },
  data(){
    return {
      isDev:process.env.NODE_ENV == 'development',
      drawer:false,
      selfMsgList:[],
      pagerCount:5,
      pageIndex:1,
      pageSize:10,
    }
  },
  
  methods:{
    test(){
      console.log('test')
    },
    funTimeShow: function (k, keyName) {
      if (k > 0) {
        let $moment = this.$moment;
        let msgList = this.selfMsgList;
        let a = $moment(msgList[k - 1][keyName])
        let b = $moment(msgList[k][keyName])
        return $moment(a).diff(b, 'minutes') < -2;
      } else {
        return false
      }
    },
    openDrawer(){
      this.drawer = !this.drawer;
      this.pageIndex = 1;
      this.getData()
    },
    handleClose(){
      this.drawer = !this.drawer;
    },
    getData(){
      let parnms = {
        pageSize:this.pageSize,
      }
      parnms[this.uidKey] = this.uidValue
      this.$api.fromImGetAppChatMsgs(parnms).then((res)=>{
        console.log(res)
        if(res.data.code == 200){
          this.formatData(res.data.data)
        }
      })
    },
    formatData(data){
      this.selfMsgList.splice(0,this.selfMsgList.length)
      if(_.isArray(data) && data.length>0){
        data.forEach((msg)=>{
          this.selfMsgList.push({
            imgUrl: msg.imgUrl,
            nicheng: msg.nicheng,
            msgId: msg.msgId,//消息ID
            userId: msg.userId,
            msgBody: msg.msgBody,
            type: msg.type,
            imgW: msg.imgW,
            imgH: msg.imgH,
            addTime: msg.addTime,
            isFromUser: msg.isFromUser,
          })
        })
      }
    },
  },
  mounted(){},
}
</script>

<style lang="less" scoped>
.mt20{margin-top:20px;}
.text-blue{color:#91bef0}

@import url('../assets/config.less');
@import url('../assets/style.less');
// .messageArea{
//   position: absolute;
//   top:0;bottom:0;left:0;right:0;
//   overflow-y: scroll;
//   overflow-x: hidden;
// }
.msgList{
  padding: 15px;
  .timeShow{
    text-align: center;
    .time {
      display: inline-block;
      font-size: 12px;
      margin: 24px auto;
      padding: 4px 8px;
      border-radius: 4px;
      background-color: #D9D9D9;
    }
  }
  .item+.item{margin-top:unit((@defPadding),px)}
  .msgBox{
    @faceW:40;
    position: relative;
    margin:0 unit((@defPadding/2),px);
    .face{
      position:absolute;
      top:0;
      width:unit(@faceW,px);height:unit(@faceW,px);
      border-radius: 50%;
    }
    &.isMe{
      text-align: right;
      padding-right:unit((@faceW + @defPadding),px);
      .face{right:0;}
    }
    &.isCus{
      text-align: left;
      padding-left:unit((@faceW + @defPadding),px);
      .face{left:0;}
    }
    /deep/ p {
      margin: 0;
      padding: 0;
    }
  }
  .nicheng {
    font-size: 12px;
    color: #666666;
    // margin: 0 12px;
    margin-bottom: 10px;
  }
}
</style>